<template>
  <el-container class="rich_content task-lists">
    <el-main>
      <el-table
          :data="taskData"
          height="600"
          style="width: 100%">
        <el-table-column
            prop="id"
            label="任务ID"
            width="250">
        </el-table-column>
        <el-table-column
            prop="liveId"
            label="直播ID"
            width="80">
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="创建时间">
        </el-table-column>
        <el-table-column
            prop="status"
            label="状态"
            width="80">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button @click="checkTaskItem(scope.row)" type="text" size="small">查看</el-button>
            <el-button @click="deleteTaskItem(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-dialog title="查看详情" :visible.sync="dialogTableVisible" :modal="false" :appendToBody="false">
      <el-table :data="contentData" height="300px">
        <el-table-column property="c" label="评论内容" width="150"></el-table-column>
      </el-table>
    </el-dialog>
  </el-container>
</template>

<script>
import DataStore from "@/utils/DataStore";
import {v4} from "uuid";
export default {
  name: "TaskListsIndex",
  data(){
    return {
      taskData: [],
      myStore:null,
      dialogTableVisible: false,
      contentData:[]
    }
  },
  mounted() {
    let _this = this;
    _this.myStore = new DataStore({name:'taskListsData'});
    _this.initData()

  },
  methods:{
    initData(){
      let _this = this;
      _this.taskData = _this.myStore.getTracks().map( item => {
        return {
          id:item.id,
          liveId:item.liveId,
          contents:JSON.parse(item.contents),
          createTime:_this.formatDate(item.createTime),
          status:item.status == 1 ? '成功' : '失败'
        }
      })
    },
    checkTaskItem(row){
      this.dialogTableVisible = true
      console.log(row.contents)
      this.contentData = row.contents.map(item => {
        return {c:item}
      })
    },
    deleteTaskItem(row){
      let _this = this;
      _this.myStore.deleteTrack(row.id)
      _this.initData()

    },
    formatDate(datetime) {
      let date = new Date(datetime);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let year = date.getFullYear(),
          month = ("0" + (date.getMonth() + 1)).slice(-2),
          sdate = ("0" + date.getDate()).slice(-2),
          hour = ("0" + date.getHours()).slice(-2),
          minute = ("0" + date.getMinutes()).slice(-2),
          second = ("0" + date.getSeconds()).slice(-2);
      // 拼接
      let result = year + "-"+ month +"-"+ sdate +" "+ hour +":"+ minute +":" + second;
      // 返回
      return result;
    }
  }

}
</script>

<style scoped>
.task-lists{
  background-color: #fff;
}
</style>
